<template>
  <div class="app-container">
    <!-- 查询start -->
    <div class="filter-container">
      <el-input v-model="queryParams.title" placeholder="请输入文章标题" style="width: 200px;" class="filter-item" />
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <el-button class="filter-item" style="margin-bottom: 10px" type="primary" icon="el-icon-circle-plus" @click="add">新增</el-button>
    </div>
    <!-- 查询end -->
    <table-model ref="tableModel" :page-fun="getPage" :is-load="true" :control-column="true" :handler-data="handelData" :edit-fun="getArticle" :del-fun="delArticle" style="margin-top: 10px" :columns="columns" />
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="100%" height="100%">
      <el-form ref="dataForm" :model="dataForm" :rules="rules" label-position="left" label-width="100px" style="width: 400px;margin-left:100px;">
        <el-form-item label="一级菜单" prop="parentMenuId">
          <el-select v-model="dataForm.parentMenuId" placeholder="一级菜单" clearable style="width: 200px" class="filter-item" @change="changeMenus">
            <el-option
              v-for="item in menus"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="二级菜单" prop="childrenMenuId">
          <el-select v-model="dataForm.childrenMenuId" placeholder="二级菜单" clearable style="width: 200px" class="filter-item">
            <el-option
              v-for="item in menuChildren"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="dataForm.title" />
        </el-form-item>
        <el-form-item label="URL后缀" prop="urlSuffix">
          <el-input v-model="dataForm.urlSuffix" :disabled="urlEnable" />
        </el-form-item>
        <el-form-item label="文章内容" prop="content" width="100%" height="100%">
          <!--<div id="editor" class="text" />-->
          <edit v-model="dataForm.content" :is-clear="false" style="width: 1000px;" />
        </el-form-item>
        <el-form-item label="状态" prop="display">
          <el-radio-group v-model="dataForm.display">
            <el-radio :label="true">显示</el-radio>
            <el-radio :label="false">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save('dataForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getParent, getChildren, update, checkUrl, getPage, get, del } from '@/api/helpcenter/article'
import edit from '@/components/Edit'
import { formatDate, objectToFormData } from '@/utils'
import tableModel from '@/components/Table'
export default {
  components: { tableModel, edit },
  data() {
    // 邮箱验证
    const checkUrlSuffix = (rule, value, callback) => {
      const other = this
      const params = {}
      params.id = other.dataForm.id
      params.urlSuffix = value
      checkUrl(params).then(response => {
        if (response.data === true) {
          callback(new Error('该路径已被其它文章占用'))
        } else {
          callback()
        }
      }).catch(error => {
        console.log(error)
        callback(new Error('服务器错误！'))
      })
    }
    return {
      columns: [
        {
          text: '文章名称',
          value: 'title'
        },
        {
          text: '一级菜单',
          value: 'parentMenuName'
        },
        {
          text: '二级菜单',
          value: 'childrenMenuName'
        },
        {
          text: '排序',
          value: 'articleSort'
        },
        {
          text: '状态',
          value: 'display'
        },
        {
          text: '更新时间',
          value: 'updateTime'
        }
      ],
      textMap: {
        create: '新增',
        update: '更新'
      },
      dialogStatus: '',
      urlEnable: true,
      dialogFormVisible: false,
      dataForm: {
        id: '',
        parentMenuId: '',
        parentMenuName: '',
        childrenMenuId: '',
        childrenMenuName: '',
        title: '',
        urlSuffix: '',
        articleSort: 0,
        content: '',
        display: true
      },
      queryParams: {
        title: '',
        page: 1,
        pageSize: 10
      },
      menus: [],
      menuChildren: [],
      rules: {
        parentMenuId: [
          { required: true, message: '请选择一级菜单' }
        ],
        title: [
          { required: true, message: '请输入文章标题' }
        ],
        urlSuffix: [
          { required: true, message: '请输入文章地址后缀' },
          { trigger: 'blur', validator: checkUrlSuffix }
        ],
        articleSort: [
          { required: true, message: '请输入文章排序' }
        ],
        display: [
          { required: true, message: '请输选择文章类型' }
        ],
        content: [
          { required: true, message: '请输入文章内容' }
        ]
      }
    }
  },
  watch: {
    'dataForm.parentMenuId': function(newValue) {
      if (newValue === '') {
        this.menuChildren = []
      }

      const other = this
      this.getChildrenMenus(newValue).then(response => {
        other.menuChildren = response.data
      })
    }
  },
  mounted() {
    this.getMenus()
  },
  methods: {
    getMenus() {
      const other = this
      getParent().then(response => {
        other.menus = response.data
      })
    },
    getChildrenMenus(id) {
      return new Promise((resolve, reject) => {
        getChildren({ 'id': id }).then(response => {
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
    changeMenus() {
      this.dataForm.childrenMenuId = ''
    },
    // 分页方法
    getPage(params) {
      return new Promise((resolve, reject) => {
        getPage(params).then(response => {
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 操作表格数据
    handelData(data) {
      data.forEach(d => {
        d.display = d.display ? '显示' : '隐藏'
        d.updateTime = d.updateTime === null ? '' : formatDate(d.updateTime, 'yyyy-MM-dd hh:mm:ss')
      })
      return data
    },
    search() {
      this.queryParams.page = 1
      this.$refs.tableModel.getPage(this.queryParams)
    },
    add() {
      this.dataForm = {
        id: '',
        parentMenuId: '',
        parentMenuName: '',
        childrenMenuId: '',
        childrenMenuName: '',
        title: '',
        urlSuffix: '',
        articleSort: 0,
        content: '',
        display: true
      }
      this.dialogFormVisible = true
      this.urlEnable = false
      this.dialogStatus = 'create'
    },
    save(formName) {
      const other = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          other.dialogFormVisible = false
          update(objectToFormData(other.dataForm)).then(response => {
            if (response.code === 0) {
              other.dataForm = {
                id: '',
                parentMenuId: '',
                parentMenuName: '',
                childrenMenuId: '',
                childrenMenuName: '',
                title: '',
                urlSuffix: '',
                articleSort: 0,
                content: '',
                display: true
              }
              other.dialogFormVisible = false
              other.$message.success('操作成功')
              other.$refs.tableModel.refreshPage()
              other.$refs[formName].resetFields()
            }
          }).catch(e => {
            other.$message.error('操作失败')
            console.error(e)
          })
        }
      })
    },
    getArticle(id) {
      const other = this
      get(id).then(response => {
        other.dataForm.id = response.data.id
        other.dataForm.parentMenuId = response.data.parentMenuId
        other.dataForm.parentMenuName = ''
        other.dataForm.childrenMenuId = response.data.childrenMenuId
        other.dataForm.childrenMenuName = ''
        other.dataForm.title = response.data.title
        other.dataForm.urlSuffix = response.data.urlSuffix
        other.dataForm.articleSort = response.data.articleSort
        other.dataForm.content = response.data.content
        other.dataForm.display = response.data.display
        other.dialogFormVisible = true
        other.dialogStatus = 'update'
        this.urlEnable = true
      })
    },
    delArticle(id) {
      return new Promise((resolve, reject) => {
        del({ 'id': id }).then(response => {
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
